﻿@model QuickPrompt.DomainModel.QuickNote

@{
    ViewBag.Title = "Notes";
}

<h2>@ViewBag.Title</h2>

<div id="NoteGridDiv">
    @(Html.Kendo().Grid<QuickPrompt.DomainModel.QuickNote>()
          .Name("NoteGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.DateCreatedUtc).Format("{0:MMM-dd-yyyy}");
              columns.Bound(c => c.Name);
              columns.Bound(c => c.StartDateUtc).Format("{0:MM/dd/yyyy HH:mm:ss}");
              columns.Bound(c => c.EndDateUtc).Format("{0:dd/MM/yyyy}");
              //columns.Bound(c => c.IsActive).ClientTemplate(
              //    @"# if(data.IsActive){ #"
              //+ "<img src=\"Content/Images/icon-active.gif\" alt=\"Active\"/>"
              //      + "#} else {#"
              //      + "<img src=\"Content/Images/the_delete_icon.png\" alt=\"In Active\" />"
              //      + "# } #").HtmlAttributes(new { @class = "td-center" }).HeaderHtmlAttributes(new { @class = "th-center" });
              columns.Command(command => { command.Edit(); command.Destroy(); });
          })
           .ToolBar(toolbar => toolbar.Create())
          .HtmlAttributes(new { style = "height: 600px;" })
          .Scrollable()
          // .Groupable()
          .Sortable()
           .ClientDetailTemplateId("PromptTemplate")
           .Editable(editable => editable.Mode(GridEditMode.PopUp))
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(true)
              .ButtonCount(5))
          .DataSource(dataSource => dataSource
              .Ajax()
              .Events(events=> events.Error("error_handler"))
              .Model(model => model.Id(n => n.Id))
              .Read(read => read.Action("Read", "Note"))
              .Create(create => create.Action("Create", "Note"))
               .Update(update => update.Action("Update", "Note"))
                .Destroy(delete => delete.Action("Destroy", "Note"))
          )
           .Events(events => events.DataBound("dataBound"))
)
</div>
<script id="PromptTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<QuickPrompt.DomainModel.Prompt>()
          .Name("QuickPrompt_#=Id#") // template expression, to be evaluated in the master context
          .Columns(columns =>
          {
              columns.Bound(c => c.IsActive).ClientTemplate(
                  @"\\#if(IsActive ==  true){\\#"
                  + Html.Raw("<img src=\"Content/Images/icon-active.gif\" alt=\"Active\"/>").ToHtmlString()
                  + "\\#} else {\\#"
                  + "<img src=\"Content/Images/the_delete_icon.png\" width=\"20\" alt=\"In Active\" />"
                  + "\\# } \\#").HtmlAttributes(new { @class = "td-center" }).HeaderHtmlAttributes(new { @class = "th-center" }).Title("").Width(50);
              columns.Bound(o => o.PromptType).Width(100);
              columns.Bound(o => o.PromptFrequency).Width(100);
              columns.Bound(o => o.AddressValue);
              columns.Bound(o => o.StartingFromUtc).Format("{0:MM/dd/yyyy HH:mm:ss}");
              columns.Command(command => { command.Edit(); command.Destroy(); });
          })
           .ToolBar(toolbar => toolbar.Create())
           .Editable(editable => editable.Mode(GridEditMode.PopUp))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(10)
                 .Model(model => model.Id(p => p.Id))
              .Read(read => read.Action("Read", "Prompt", new { id = "#=Id#"}))
              .Create(create => create.Action("Create", "Prompt", new { parentId = "#=Id#" }))
               .Update(update => update.Action("Update", "Prompt"))
                .Destroy(delete => delete.Action("Destroy", "Prompt"))
          )
          .Pageable()
          .Sortable()
          .ToClientTemplate()
          )
</script>

<script>
    function dataBound() {
        //this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>